<template>
  <div>
    <div class="goodscategory">
      <!-- 头部区域 -->
      <header class="head">
        <div class="bock" @click="$router.push('/home')">
          <i></i>
        </div>
        <form action="">
          <input
            type="text"
            :placeholder="$route.query.keyword"
            class="search"
            @click.stop="gotosearch"
          />
          <img
            src="../assets/image/home/return.png"
            alt=""
            class="search-img"
          />
        </form>
        <div class="right">
          <img src="../assets/image//cate/cart.png" alt="" class="right-img" />
        </div>
      </header>
      <!-- 分类区域 -->
      <div class="goodsNav">
        <goodsNav :categoriesNav="categoriesNav" @myEvent="myEvent"></goodsNav>
      </div>
      <!-- 商品列表区域 -->
      <div class="goodsList" v-if="getgoodsList">
        <div
          class="goodsItem"
          v-for="(item, i) in getgoodsList.slice(2)"
          :key="i"
          @click.stop="gotodetails(item)"
        >
          <img :src="item.img" alt="" />
          <div class="goods-info">
            <span class="title"
              ><span
                class="gg"
                :style="[{ color: gg.color }, { backgroundColor: gg.bgColor }]"
                v-for="(gg, index) in item.leftbottom_taglist"
                :key="index"
                >{{ gg.content }}</span
              >{{ item.title }}</span
            >
            <div class="footer">
              <span class="price">￥{{ item.price }}</span>
              <span class="collect">{{ item.cfav }}</span>
              <img src="../assets/image/cate/collect.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="load" v-show="isloading">正在加载中...</div>
    </div>
  </div>
</template>

<script>
import goodsNav from "@/components/GoodsNav.vue";
export default {
  components: { goodsNav },
  data() {
    return {
      categoriesNav: [], //商品分类数据
      getgoodsList: [], //商品列表
      page: 1, //分页
      sortKey: "",
      isloading: false, //是否在发请求
    };
  },
  methods: {
    async getGoodsList(kew = this.$route.query.keyword, type) {
      this.isloading = true;
      const { data: res } = await this.axios.get(
        `https://apis.netstart.cn/mogujie/search/searchByKeyword?q=${kew}&page=${this.page}&sort=${type}`
      );
      this.isloading = false;
      if (this.page == 1) {
        this.categoriesNav = res.result.sortFilter;
      }
      this.getgoodsList = [...this.getgoodsList, ...res.result.wall.docs];
    },
    myEvent(item) {
      this.getgoodsList = [];
      this.sortKey = item;
      this.getGoodsList(this.$route.query.keyword, item.sortKey);
    },
    //触底触发函数
    listenBottomOut() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight - 50;
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.isloading) return;
        console.log("触底了");
        this.page++;
        this.getGoodsList(this.$route.query.keyword, this.sortKey);
      }
    },
    // 返回搜索页
    gotosearch() {
      this.$router.push({
        path: "/search",
        query: {
          sketch: this.$route.query.keyword,
        },
      });
    },
    // 跳转商品详情请
    gotodetails(item) {
      console.log(item);
      this.$router.push({
        path: "/goodsdetails",
        query: {
          id: item.tradeItemId
        },
      });
    },
  },
  created() {
    this.getGoodsList();
  },
  mounted() {
    window.addEventListener("scroll", this.listenBottomOut);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.listenBottomOut);
  },
};
</script>

<style lang="scss" scoped>
.load {
  padding: 10px 0;
  text-align: center;
}
.goodscategory {
  .head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 888;
    display: flex;
    height: 44px;
    align-items: center;
    border: 1px solid #e5e5e5;
    .bock,
    .right {
      flex: 0 0 50px;
      text-align: center;
    }
    .bock {
      display: flex;

      justify-content: center;
      i {
        width: 15px;
        height: 15px;
        display: block;
        background: url("../assets/image//home/back.png") center no-repeat;
        background-size: contain;
      }
    }
    form {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #eee;
      .search-img {
        width: 25px;
        height: 25px;
        margin: 0 10px;
      }
    }
    input::-webkit-input-placeholder {
      font-size: 16px;
      color: #333;
    }
    .search {
      display: block;
      padding-left: 30px;
      height: 30px;
      font-size: 12px;
      color: #999;
      border: none;
      background: url(../assets/image/home/search.png) no-repeat left;
      border-radius: 3px;
      background-size: 13px auto;
      background-position: 10px;
    }
    .right {
      img {
        width: 22px;
        height: 21px;
      }
    }
  }
  .goodsNav {
    position: fixed;
    top: 0;
    padding-top: 44px;
    background-color: #fff;
  }
  .goodsList {
    margin-top: 85px;
    height: 100%;
    background-color: #efefef;
    display: flex;
    flex-wrap: wrap;
    .goodsItem {
      background-color: #fff;
      width: 47%;
      margin: 2% 0 0 2%;
      img {
        width: 100%;
        object-fit: cover;
        height: 235px;
      }
      .goods-info {
        padding: 5px 6px;
        overflow: hidden;
        .gg {
          padding: 0 5px;
        }
        .title {
          font-size: 12px;
          line-height: 16px;
          margin-bottom: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .footer {
          display: flex;
          justify-content: space-between;
          .price {
            flex: 1;
            font-weight: bold;
            font-size: 15px;
          }
          .collect {
            font-size: 12px;
            color: #999999;
            margin-right: 2px;
          }
          img {
            width: 14px;
            height: 14px;
            margin-top: -2px;
          }
        }
      }
    }
  }
}
</style>